<template id="box">
             <div class="box productType">
  
    <!-- //表格头 -->
            <div class="box1">
              <div>
                <li><i class="el-icon-notebook-2"></i> 数据列表</li>
                <el-button plain @click="open">添加</el-button>
              </div>
            </div>


              <!-- //表格 -->
              <div class="box2">
              <el-table :data="tableData"  border style="width: 100%"   @selection-change="handleSelectionChange">

              <el-table-column   prop="date"  align="center" type="selection" width="60">
              </el-table-column>

              <el-table-column prop="id" label="编号" width="50" align="center">
              </el-table-column>

              <el-table-column prop="name" label="属性名称" width="100" align="center">
              </el-table-column>

              <el-table-column  label="商品类型" align="center"   ><div>{{uname}}</div>
                
              </el-table-column>

              <el-table-column prop="selectType" label="属性是否可选" align="center" :formatter="ifendcase" >
              </el-table-column>

              <el-table-column prop="inputType" label="属性值的录入方式" align="center"  :formatter="ifendcases">
              </el-table-column>

              <el-table-column prop="inputList" label="可选值列表" align="center" >
              </el-table-column>

              <el-table-column prop="sort" label="排序" align="center">
              </el-table-column>

              <el-table-column label="操作" align="center" id="change" width="300">
        <template   slot-scope="scope"   width="300">
          <el-button   plain @click="handleEdit3( scope.row)" >编辑</el-button>    
          <el-button type="danger" @click="opens( scope.row)" >删除</el-button>
        </template >
              </el-table-column>

              </el-table>
              </div>

              <div class="box3">
                  <div>
                      <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item label="">
                                  <el-select v-model="formInline.region" placeholder="批量操作">
                                    <el-option label="删除" value="1"></el-option>
                                    <el-option label="待定" value="2"></el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item>
                                  <el-button type="primary" @click="toggleSelection()">确定</el-button>
                                </el-form-item>
                              </el-form>
                  </div>



                  <div>
                     <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[5, 10, 15]"
                        :page-size="5"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total= page>
                      </el-pagination>
                  </div>             
              </div>            
            </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Canshu",

  mounted() {

    let that = this;
    that.tiao =this.$route.params.tiao
    that.uname =  this.$route.params.names
   that.type = this.$route.params.type;
   that.productAttributeCategoryId=this.$route.params.productAttributeCategoryId
// console.log(this.tiao);

    this.$axios
      .get("productAttribute/list/"+this.$route.params.num, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 1,
        
        },
      })
      .then(function (response) {
      that.page = response.data.data.total;
    that.tableData = response.data.data.list;
      })
      .catch(function (error) {
    
      });
  },

  data() {
    return {
      tiao:"",
      merchantSelectedIds:0,
       multipleSelection: [],

       formInline: {
          user: '',
          region: ''
        },
      tableData: [],
      state1: "",
      state2: "",
      currentPage4: 0,
      currentPage: 0,
      name: "",
      names:"",
      pageNum:1,
      pageSize:5,
      uname:"",
          page:1,
         type:5,


    };
  },

  methods: {


//选取方式

  ifendcase(val){

    if(val.selectType==0){
      return "唯一"
    }
    else if(val.selectType ==1){
      return '单选'
    }
    else {
      return "多选"
    }

  },

  ifendcases(val){

    if(val.selectType==1){
      return "从列表中选取"
    }

    else {
      return "手工录入"
    }
 
  },






    fn() {
      let that = this;
      this.$axios
        .get("productAttribute/list/"+this.$route.params.num , {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            type:1
            
          },
        })
        .then(function (response) {
       
          that.tableData = response.data.data.list;
                that.page = response.data.data.total 
        
        })
        .catch(function (error) {
       
        });
    },


    //添加



    open() {
   
          this.$router.push({
          name:"Tianjia",
          params:{
    
         shangpin:this.uname,
          type:this.type,
          productAttributeCategoryId:this.productAttributeCategoryId,
          uname:this.uname,
          nums: this.$route.params.num,
          tiao:this.tiao,
          

       },
       
      });
// console.log(this.tiao);


    },


//分页
    handleSizeChange(val) {
      (this.pageSize = `${val}`), 
      this.fn();
   
    },
    handleCurrentChange(val) {
      this.pageNum = `${val}`;
      this.fn();
    
    },




    //删除
    opens(index, row) {
            let that = this

              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                that.$axios.post('/productAttribute/delete?ids='+index.id,{                       
                }),
            
                that.fn()
             
                this.$message({    
                     
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });          
              });
            },




//批量删除











// 获取选择框id

handleSelectionChange(val){

  this.merchantSelectedIds = val

},

//s


//再删除
toggleSelection(){


  let that =this
  let ps = [];
if( ps != "" || this.region ==1 ){
 this.merchantSelectedIds.forEach(element => {
      ps.push(element.id)    
    })



 if(ps!= ""){
                      
    if(this.region == 1){

                                        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                                                  confirmButtonText: '确定',
                                                  cancelButtonText: '取消',
                                                  type: 'warning'
                                                }).then(() => {
                                                  this.$message({
                                                    type: 'success',
                                                    message: '删除成功!'
                                                  });

                                        this.$axios.post('/productAttribute/delete?ids='+ps).then(function (response){
                                              that.fn()
                                            })         
                                                }).catch(() => {
                                                  this.$message({
                                                    type: 'info',
                                                    message: '已取消删除'
                                                  });          
                                                });
                                          
                                        }
                                        else{
                                          this.$message({
                                                  message: '请选择操作内容',
                                                  type: 'warning'
                                                });
                                        }
  }else{
                              this.$message({
                                    message: '请选择一条数据',
                                    type: 'warning'
                                  });
  }
  
  
  
}



  
else{ 
  // console.log(123);
  
 this.$message({
          message: '您未进行选项操作',
          type: 'warning'
        });     

}

    },


// 编辑

  handleEdit3(index, row) {

        //      console.log(index, row);
        // console.log(index.id);
        // console.log(index.name);
      this.num = index.id;
      
          this.$router.push({
        name:"Bianji",
       params:{
         sort: index.sort,
         inputList:index.inputList,
         shuxing:index.name,
         shangpin:this.uname,
         id:index.id,
         tiao:this.tiao
       }}) },


}

  }


</script>

<style scoped>
li {
  list-style: none;
}
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 2.125rem;
}
.box1 {
  font-size: 1.5625rem;
  line-height: 2.125rem;
  width: 80%;
  height: 4.725rem;
  border: 1px solid #ebeef5;
 border-radius:.125rem;
  margin-bottom: 2.1875rem;
  margin-top: 1.25rem;
}
.box1 div {
  widows: 80%;
  padding: 1.25rem;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.box2 {
  width: 80%;
}
#change {
  display: flex;
  flex-wrap: nowrap;
}



.box3 {
  margin-top: 1.875rem;
  width: 80%;
  display: flex;
  justify-content: space-between;
}


.el-dropdown {
    vertical-align: bottom;
  }
  .el-dropdown + .el-dropdown {
    margin-left: .9375rem;
  }
  .el-icon-arrow-down {
    font-size: .75rem;
  }

a{
  list-style: none;
 text-decoration:none;
 color: black;
}
</style>
